// 放大图
$(function(){
    //1,鼠标放在下面的小图标：①边框换颜色 ②上面的主图切换 ③将小图标的rel赋值给大图的src
                $("[smallimage]").mouseover(function(){//鼠标经过
                    $(this).css("border","1px solid #ca141d")
                    var address=$(this).attr("src")
                    $("[upimg]").attr("src",address)
                    var rel=$(this).attr("rel")
                    $('#bigImg').attr("src",rel)
                }).mouseout(function(){
                    $(this).css("border","none")
                })
    
    //2,鼠标经过主图 遮罩和大图出现  鼠标移开反之
                $(".imgsmallBox").mouseover(function(){
                    $(".mask").css("display","block")
                    $(".imgbigBox").css("display","block")
                }).mouseout(function(){
                    $(".mask").css("display","none")
                    $(".imgbigBox").css("display","none")
                })
    
    //3,①计算遮罩位置 ②限制遮罩位置 ③修改遮罩显示位置，使遮罩可移动，不再固定在左上角 ④图片放大操作
                $('.imgsmallBox').mousemove(function(){
                    var event=event || window.event;
                    //鼠标在页面中的坐标
                    var pageX=event.pageX
                    var pageY=event.pageY
                    //计算鼠标的位置 距 盒子的距离  鼠标在盒子中的位置
                    var boxX=pageX-$(".all").offset().left//返回第一个匹配元素的偏移坐标。是浏览器
                    var boxY=pageY-$(".all").offset().top//该方法返回的对象包含两个整型属性：top 和 left，以像素计
                    //计算遮罩的位置
                    var maskX=boxX-$(".mask").outerWidth()/2//outerWidth() 方法返回第一个匹配元素的外部宽度。看定位是主图片盒子
                    var maskY=boxY-$(".mask").outerHeight()/2
                    //限定遮罩可移动范围
                    //当遮罩左边刚好和小图片左边重叠 且 鼠标移动到遮罩中心位置左边时，遮罩不能再移动
                    if(maskX<0) maskX=0
                    //当遮罩右边刚好和小图片右边重叠 且 鼠标移动到遮罩中心位置右边时，遮罩不能再向右移动
                    if(maskX>$(".imgsmallBox").outerWidth()-$(".mask").outerWidth()){
                        maskX=$(".imgsmallBox").outerWidth()-$(".mask").outerWidth()
                    }
                    //控制上移
                    if(maskY<0) maskY=0
                    //控制下移
                    if(maskY>$(".imgsmallBox").outerHeight()-$(".mask").outerHeight()){
                        maskY=$(".imgsmallBox").outerHeight()-$(".mask").outerHeight()
                    }
    
                    //修改遮罩的显示位置
                    $(".mask").css("left",maskX+"px")
                    $(".mask").css("top",maskY+"px")
    
                    //图片放大
                    //设置图片放大倍数=小图与大图片的倍数
                    /* 小图200px 大图400px 遮罩100px 放大的大图200px */
                    /* 小图400px 大图800px 遮罩200px 放大的大图400px */
                    /* 小图400px 大图600px 遮罩200px 放大的大图300px 1.5倍*/
                    /* 小图450px 大图800px 遮罩225px 放大的大图400px 1.7倍  大图和放大的大图2倍。js的倍数是小图和大图的倍数*/
                    // 小图400px 大图700px 遮罩200px 放大的大图350px 1.75倍 
                    var multiple=1.75
                    //设置大图片当前的位置=rate*遮罩当前的位置
                    $("#bigImg").css("left",- multiple*maskX+"px")
                    $("#bigImg").css("top",-multiple*maskY+"px")
    
                })
            })